<?php if(!defined('A')) exit;?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>网站内容管理系统</title>
<?php
loadcss(array('reset','shell'));
loadjs('jquery',P_JS);
loadjs(array('tab','util','table'));
?>
<script type="text/javascript">
$(document).ready(function(e) {
var smallNowTab;
var pt = new Tabs();
pt.classpre="smalltab_";
pt.container = "smalltab_container";
pt.createTab("t1","html5巨型文件上传","",true,"n");
pt.init = function(){
	smallNowTab = pt.nowTab;
};
pt.onclick = function(){
	smallNowTab = pt.nowTab;
};		
pt.initTab();
pt.clickNowTab();    
});

$(document).ready(function(){ 
	
});
</script>
<script type="text/javascript">
var xhr = new XMLHttpRequest();
var clock = null;

function begin() {
    clock = window.setInterval(function(){
		sendfile();
	},1000);    
}
// 闭包计数器
var sendfile = (function() {
	
    const LENGTH = 2 * 1024 * 1024; //每次切2M 
    var sta = 0;
    var end = sta + LENGTH;
    
    var blob = null;
    var fd = null;
    // 百分比 
    var percent = 0;

    return (function () {       
        
        var mov = document.getElementsByName('upfile')[0].files[0];
		
        // 如果sta>mov.size,就结束了
        if(sta > mov.size) {
			var xhr2 = new XMLHttpRequest();
			
			xhr2.open('GET','<?php echo url('upload','html5_sess_','kind=2');?>',true);
    		xhr2.send(null);
			xhr2.onreadystatechange=function (){ 
				if(xhr2.readyState==4 && xhr2.status==200){
					document.getElementById('response').innerHTML=xhr2.responseText;
				}
    		}
            clearInterval(clock);
            return;
        }
        blob = mov.slice(sta,end);
        fd = new FormData();
        fd.append('part',blob);
		fd.append('callback',document.getElementsByName('callback')[0].value);
		fd.append('file_type',document.getElementsByName('file_type')[0].value);
        
		xhr.open('POST','<?php echo url('upload','html5_');?>',false);
    	xhr.send(fd);
		
        sta = end;
        end = sta + LENGTH;
        

        percent = 100 * end / mov.size;
        if(percent > 100) {
            percent = 100;
        }
        document.getElementById('bar').style.width = percent + '%';
		document.getElementById('bar').innerHTML = Math.round(percent) + '%';
    });

})();

</script>
<style>
body{margin:10px;}
</style>
<style type="text/css">
#progress{
	width:500px;
	height:30px;
	border:1px solid green;
}
#bar {
	width: 0%;
	height:100%;
	background:green;
}
</style>
</head>
<body>
<table class="settop">
<tr>
<td class="settop_left">
&nbsp;&nbsp;
</td>
<td>
<div id="smalltab_container"></div>
</td>
</tr>
</table>
<div class="smalltab_line"></div>
<div id="t1">
<br />
<br />

<table width="90%" border="0" cellspacing="0" cellpadding="0" class="mytable">
  <tr>
    <td align="right">进度：</td>
    <td align="left">
    <div id="progress">
            <div id="bar"></div>
    </div>
    </td>
  </tr>
  <tr>
    <td align="right">文件类型：</td>
    <td align="left"><input type="text" readonly="readonly" value=".rar" name="file_type" /></td>
  </tr>
  <tr>
    <td align="right">选择文件：</td>
    <td align="left"><input name="upfile" type="file" onchange="begin();" /><input name="callback" type="hidden"  value="<?php echo $callback;?>" /></td>
  </tr>
  <tr>
    <td align="right">&nbsp;</td>
    <td align="left">
    <script>if(!new FormData()){document.write('您的浏览器不支持html5上传！');}</script>
    <div id="response"></div>
    </td>
  </tr>
</table>

</div>
</body>
</html>